<template>
  <div class="users_box">丁普成
    <el-card>
      <el-row class="header">
        <el-col :span="6">
          <el-input placeholder="根据用户名搜索" v-model="queryInfo.title"></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px;">
          <el-button size="small" @click="clearUsers">清空</el-button>
          <el-button type="primary" size="small" @click="searchUsers">搜索</el-button>
        </el-col>
        <el-col :span="10">
          <el-button type="success" icon="el-icon-edit" @click="showAddForm" class="filter-item fr" size="small">
            新增权限组</el-button>
        </el-col>
      </el-row>
      <el-alert :title="'共'+counts+'条记录'" type="info" show-icon :closable="false" style="margin:20px 0px">
      </el-alert>
      <el-table ref="multipleTable" :data="tableList" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="100" align="center">
        </el-table-column>
        <el-table-column label="用户名" width="550" prop="title" align="center">
        </el-table-column>
        <el-table-column prop="create_date" label="日期" width="500" sortable align="center">
          <template v-slot="{row}">
            {{row.create_date|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" show-overflow-tooltip align="center">
          <template v-slot="{row}">
            <el-button type="primary" plain icon="el-icon-edit" circle @click="editAddForm(row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="remove(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="fenye" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pagesize"
        layout="prev, pager, next,sizes,  jumper" :total="counts">
      </el-pagination>
    </el-card>
    <!-- 新增权限组 -->
    <Add @newDataes="newDataes" @handleCloseModal="handleCloseModal" ref="addRef" :ruleInline="addFormRules"
      :text="title.text" :pageTitle="title.pageTitle">
    </Add>
    <!-- <el-dialog title="提示" :visible.sync="addDialog" width="50%">
      <el-form label-width="250px" :model="addForm" :rules="addFormRules" ref="addFormRef">
        <el-form-item label="用户名" prop="title">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree :data="permissionsList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
            :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addDialog = false">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 编辑权限组 -->
  </div>
</template>
<script>
import { list, remove } from '../../api/base/permissions'

import Add from '../components/permissions-add.vue'
export default {
  components: {
    Add
  },
  data () {
    return {
      editForm: {},
      title: {
        text: '',
        pageTitle: '权限组'
      },
      // 权限分配数据
      permissionsList: [
      ],
      // 验证规则
      addFormRules: {
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      // 新增权限组表单
      addForm: {
        title: ''
      },
      addDialog: false,
      counts: 0,
      // 权限列表数据
      tableList: [],
      queryInfo: {
        page: 1,
        pagesize: 10,
        title: ''
      }
    }
  },

  created () {
    this.getTableList()
  },
  watch: {
    counts () {
      if (this.counts === (this.queryInfo.page - 1) * this.queryInfo.pagesize && this.counts !== 0) { // 这一行是关键代码，倍数关系
        this.queryInfo.page -= 1
        this.getTableList()// 获取表格数据的方法
      }
    }
  },
  methods: {
    // 清空操作
    clearUsers () {
      this.queryInfo.title = ''
      this.getTableList()
    },
    // 搜索功能
    searchUsers () {
      this.getTableList()
    },
    // 删除功能
    remove (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功!')
        this.getTableList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 隐藏
    handleCloseModal () {
      this.$refs.addRef.dialogFormH()
    },
    // 点击确定之后重新获取数据刷新一下页面
    newDataes () {
      // console.log(form)
      this.getTableList()
      this.$refs.addRef.dialogFormH()
    },
    // 编辑
    editAddForm (row) {
      this.$refs.addRef.dialogFormV()
      this.title.text = '修改'
      console.log(row.id)
      this.$refs.addRef.hanldeEditForm(row.id)
    },
    // 显示新增表单
    showAddForm () {
      this.title.text = '新增'
      this.$refs.addRef.handleResetForm()
      this.$refs.addRef.dialogFormV()
    },
    // 获取权限分配数据
    // async getPermissionsList () {
    //   const res = await list()
    //   console.log(res)
    //   this.permissionsList = res.data
    //   console.log(this.permissionsList)
    // },
    // 每页几条
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getTableList()
    },
    // 当前页
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getTableList()
    },
    // table
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 获取权限数据
    async getTableList () {
      const { data: res } = await list(this.queryInfo)
      console.log(res)
      this.tableList = res.list
      console.log(this.tableList)
      this.counts = res.counts
    }
  }
}
</script>

<style scoped lang='less'>
.users_box {
  margin: 20px 20px;
}
.fenye {
  float: right;
  margin: 20px 0px;
}
</style>
